import {
  JSXElement,
  ParentComponent,
  ParentProps,
  Show,
  splitProps,
} from "solid-js";
import Dialog, { RootProps } from "@corvu/dialog";

export const Modal = (
  props: ParentProps<
    RootProps & {
      title?: string;
      description?: string;
      trigger?: JSXElement;
    }
  >
) => {
  const [local, rootProps] = splitProps(props, [
    "children",
    "title",
    "description",
    "trigger",
  ]);

  return (
    <Dialog {...rootProps} closeOnOutsideFocus={false} closeOnOutsidePointer={false}>
      {local.trigger}
      <Dialog.Portal>
        <Dialog.Overlay class="fixed inset-0 z-50 bg-black/50 data-open:animate-in data-open:fade-in-0% data-closed:animate-out data-closed:fade-out-0%">
          <Dialog.Content class="fixed left-1/2 top-1/2 z-50 min-w-80 -translate-x-1/2 -translate-y-1/2 rounded-lg border-2 border-corvu-400 bg-corvu-100 px-6 py-5 data-open:animate-in data-open:fade-in-0% data-open:zoom-in-95% data-open:slide-in-from-top-10% data-closed:animate-out data-closed:fade-out-0% data-closed:zoom-out-95% data-closed:slide-out-to-top-10%">
            <Show when={local.title}>
              <Dialog.Label class="text-lg font-bold">
                {local.title}
              </Dialog.Label>
            </Show>
            <Show when={local.description}>
              <Dialog.Description class="mt-2">
                Tell us what you like about Solid the most!
              </Dialog.Description>
            </Show>
            {local.children}
          </Dialog.Content>
        </Dialog.Overlay>
      </Dialog.Portal>
    </Dialog>
  );
};
